<template>
  <div class="users">
    <div class="users-top">
      <div class="left">
        <div class="itm"><el-button @click="addEv">新增</el-button></div>
      </div>
      <div class="right">
        <div class="itm"> <el-input clearable v-model="tableObjData.name__like" style="width: 240px" placeholder="" /></div>
        <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
      </div>

    </div>
    <div class="table-content">
      <el-table :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" empty-text="暂无数据" border height="100%" :data="tableListData">
        <el-table-column align="center" show-overflow-tooltip header-align="center" prop="code" label="模块编码" width="150" />
        <el-table-column align="center" show-overflow-tooltip header-align="center" prop="name" label="模块名称" width="120" />
        <el-table-column align="center" show-overflow-tooltip header-align="center" prop="status" label="状态" width="120" >
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip header-align="center" prop="sort" label="排序" width="120" />
        <el-table-column align="center" show-overflow-tooltip header-align="center" prop="parent_name" label="所属上级" width="120" />
        <el-table-column align="center" show-overflow-tooltip header-align="center" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="editRowEv(scope.row.id)">
              修改
            </el-button>
            <el-popconfirm placement="left-end" width="220" confirm-button-text="删除" cancel-button-text="取消"
              icon-color="#626AEF" confirm-button-type="text" title="是否确认永久是删除此数据" @confirm="deleteSelRowEv(scope.row)">
              <template #reference>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <addEdit ref="refAddEdit" @emitGetDataEv="emitGetDataEv" />
  </div>
</template>

<script setup>
import { FunsListGet,FunsPkDelete } from '@/api/setting/funs/index.js'
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loadingStore } from '@/stores/index.js'
import addEdit from '@/views/setting/funs/components/addEdit.vue'

const loading = loadingStore()
let tableListData = ref([])
let refAddEdit = ref(null)
let tableObjData = reactive({
  name__like: '',
  page: 1,
  total: 0,
  has_next: false,
  has_prev: false,
  pages: 0,
  pageSize: 20
})

onMounted(() => {
  getEv(false)
})
onActivated(() => {

})
const addEv = () => {
  refAddEdit.value.dialogVisible = true
  refAddEdit.value.isAdd = true
}
// 查询数据
const getEv = async (msg) => {
  loading.loading = true
  try {
    let arr_data = await FunsListGet(tableObjData)
    if (arr_data.status != 200) {
      return
    }
    if (msg == true) {
      ElMessage.success('查询成功')
    }
    tableListData.value = arr_data.data.result.data
    tableObjData.total = arr_data.data.result.total
    tableObjData.has_next = arr_data.data.result.has_next
    tableObjData.has_prev = arr_data.data.result.has_prev
    tableObjData.pages = arr_data.data.result.pages
    tableObjData.pageSize = arr_data.data.result.pageSize

  } catch (error) {
    ElMessage.error('查询接口请求失败' + error)
  } finally {
    loading.loading = false
  }
}
// 编辑数据
const editRowEv = (rowId) =>{
  refAddEdit.value.updateSelRowEv(rowId)
}

// 删除数据
const deleteSelRowEv = async (row) => {
  loading.loading = true
  try {
    let arr_data = await FunsPkDelete(row.id)
    if (arr_data.status != 200) {
      return
    }
    await getEv(false)
    ElMessage.success('删除成功')
  } catch (error) {
    ElMessage.error('删除接口请求失败' + error)
  }finally {
    loading.loading = false
  }
}


// 子组件操作后查询数据
const emitGetDataEv = (val) => {
  tableObjData.page = 1
  tableObjData.username__like = val
  getEv()
}



</script>

<style lang='less' scoped>
@users-top-height: 50px;

.users {
  height: 100%;
}

.users-top {
  height: @users-top-height;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .right {
    display: flex;
    align-items: center;
  }

  .itm {
    padding-right: 4px;
    box-sizing: border-box;
  }
}

.table-content {
  height: calc(100% - @users-top-height);
}

.dialog-content {
  display: flex;
  align-items: center;
  height: 40px;

  .left {
    width: 120px;
    text-align: right;
    padding-right: 5px;
    box-sizing: border-box;
  }
}
</style>